import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Col, Form, Input, Row } from 'antd';
import React, { useState } from 'react';

/**
 *
 * @param props
 * @returns
 * 首先，用一个数组来控制增加或者减少卡片，数组默认值为1 初始有一张卡片
 * 然后遍历这个数组，通过索引来显示卡片1、2、3 为了让其按顺序排
 * 绑定的值为 key ， key 是数组的元素，每增加一个卡片都会追加一个数组末尾值+1的元素，保证每个卡片的 key 唯一
 * 删除的时候，根据 key 值进行过滤删除，然后获取表单的值，过滤出删除卡片的值，重新给表单赋值。
 */

function EditForm(props: any) {
  const { columnData } = props;
  const { form, title } = props;
  const { getFieldDecorator } = form;
  const [detailsList, setDetailList] = useState([1]);
  const handleRemoveCard = (key: number) => {
    form.validateFields((err: String, values: Object) => {
      const obj = {};
      Object.keys(values).forEach((item: any) => {
        if (!item.includes(key)) {
          obj[item] = values[item];
        }
      });
      form.setFieldsValue(obj);
    });
    const newDetailList = detailsList.filter((item: number) => item !== key);
    setDetailList(newDetailList);
  };
  const getInput = () =>
    detailsList.map((items: any, index: number) => (
      <div key={items}>
        <Card
          title={`卡片${index + 1}`}
          extra={index !== 0 ? <a onClick={() => handleRemoveCard(items)}>删除</a> : ''}
          bordered={false}
          style={{ marginTop: '20px' }}
        >
          <Form labelCol={{ span: 9 }} wrapperCol={{ span: 14 }}>
            <Row gutter={24}>
              {columnData.map((item: any) => (
                <Col span={6} key={item.dataIndex}>
                  <Form.Item key={item.dataIndex} label={item.title}>
                    {getFieldDecorator(item.dataIndex + items)(<Input placeholder="请输入" />)}
                  </Form.Item>
                </Col>
              ))}
            </Row>
            {items === detailsList[detailsList.length - 1] ? (
              <Form.Item wrapperCol={{ offset: 10 }}>
                <Button
                  type="primary"
                  style={{ marginRight: '20px' }}
                  onClick={() =>
                    setDetailList([...detailsList, detailsList[detailsList.length - 1] + 1])
                  }
                >
                  提交
                </Button>
                <Button>重置</Button>
              </Form.Item>
            ) : (
              ''
            )}
          </Form>
        </Card>
        {items === detailsList[detailsList.length - 1] ? (
          <Button
            type="dashed"
            onClick={() => setDetailList([...detailsList, detailsList[detailsList.length - 1] + 1])}
            style={{ width: '100%', height: '50px' }}
          >
            增加明细
          </Button>
        ) : (
          ''
        )}
      </div>
    ));

  return (
    <PageHeaderWrapper title={title}>
      <Card title="信息" bordered={false} style={{ marginTop: '20px' }}>
        <Form labelCol={{ span: 9 }} wrapperCol={{ span: 14 }}>
          <Row gutter={24}>
            {columnData.map((item: any) => (
              <Col span={6} key={item.dataIndex}>
                <Form.Item key={item.dataIndex} label={item.title}>
                  {getFieldDecorator(item.dataIndex)(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
            ))}
          </Row>
          {/* <Form.Item wrapperCol={{ offset: 10 }}>
            <Button type="primary" style={{ marginRight: '20px' }}>
              提交
            </Button>
            <Button>重置</Button>
          </Form.Item> */}
        </Form>
      </Card>
      {getInput()}
    </PageHeaderWrapper>
  );
}
export default EditForm;
